<template>
	<view class="u-content">
		<u-sticky bgColor="#fff" zIndex="999">
			    <u-tabs 
				:list="infor.feature"
				 keyName="title"
				 :scrollable="false"
				 :current="current"
				 @change="tabsChange"
				 lineWidth="30"
				 lineColor="#ae87d8"
				 :activeStyle="{
				 	color: '#ae87d8',
				 	fontWeight: 'bold',
				 	transform: 'scale(1.05)',
					'white-space': 'nowrap',
					overflow: 'hidden',
					'text-overflow': 'ellipsis'
				 }"
				 :inactiveStyle="{
				 	color: '#606266',
				 	transform: 'scale(1)',
					'white-space': 'nowrap',
					overflow: 'hidden',
					'text-overflow': 'ellipsis'
				 }"
				 ></u-tabs>
		</u-sticky>
	
		<!-- banner -->
	<!-- 	<view class="banner">
			<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in infor.info" :key="index">
					<image :src="item.imgurl"></image>
				</swiper-item>
			</swiper>
		</view> -->
		<scroll-view scroll-y="true"  :scroll-top="topIndex" class="scroll" scroll-with-animation :scroll-into-view="intoView">
			<view class="list">
				<view class="li" :id="'id'+index" v-for="(item,index) in infor.feature">
					<view class="title">{{item.title}}</view>
					<view class="infor" :class="item.cond?'heightFix':''"><u-parse :content="item.content"></u-parse></view>
					<view class="btn-box flex-box">
						<view class="open flex-box" @click="itemClick(item)" v-if="!item.cond">展开 <u-icon name="arrow-down"></u-icon></view>
						<view class="close flex-box" @click="itemClick(item)" v-if="item.cond">收起 <u-icon name="arrow-up"></u-icon></view>
					</view>
				</view>
				<!-- <view class="li">
					<view class="title">黑眼圈</view>
					<view class="infor">黑眼圈，昵称[熊猫眼],又名眶下色素沉着]，但也不限于眶下，可以是整个眼周，是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉是指双眼下方或眼周颜色暗沉,根据形成原因常被划分为三型:广血管型1T色素型和结构型]。而这届年轻人常会被好几种黑眼圈(即[混合型])同时困扰。</view>
					<view class="btn-box flex-box">
						<view class="open flex-box" @click="">展开 <u-icon name="arrow-down"></u-icon></view>
						<view class="close flex-box">收起 <u-icon name="arrow-up"></u-icon></view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
		
		
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				intoView:'',
				current:0,
				list:[],
				infor: {},
				content:'',
				intro: '',
				topIndex:0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getMeetAnEmergency()
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
			
			uni.setNavigationBarTitle({
				title: this.infor.info.title
			})
		},
		
		methods:{
			tabsChange(item) {
				let _this = this
				this.current = item.index;
				this.intoView = 'id'+item.index
				const query = uni.createSelectorQuery().in(this);
				query.select('#id'+item.index).boundingClientRect(data=>{
					console.log('距离：',data.top)
					 
					  // 设置滚动参数
					     const options = {
					         duration: 300,   // 滚动持续时间（单位ms）
					         selector: '#targetId',   // 选择器，表示滚动到该元素处
					         success: function () {
					             console.log('滚动成功！');
					         },
					         fail: function (err) {
					             console.error('滚动失败：' + err);
					         }
					     }
						 // 执行滚动操作
					 const scrollTop = data.top
					    uni.pageScrollTo({
					        scrollTop: scrollTop-20,
					        ...options
					    });
				}).exec()
			},
			itemClick(item){
				console.log(item,this.infor,88888888)
				item.cond = !item.cond
			},
			returnText(text){
				return text.replace(/\\n/g,'')
			},
			getMeetAnEmergency(){
				this.$u.api.questionContent({id:this.id})
				.then(res=>{
					console.log(res);
					if(res.status){
						
						for(let i=0;i<res.msg.feature.length;i++){
							res.msg.feature[i].cond = false
						}
						this.infor = res.msg
						// this.content = this.infor.info.info.replace(/\\n/g,'<br>')
						// console.log(this.infor.info.info.replace(/\\n/g,'<br>'),88888888888888888888888888888888888888888)
						uni.setNavigationBarTitle({
							title: this.infor.info.title
						})
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:#f5f5f5;
		.scroll{
			min-height:1000rpx;
		}
		.list{
			padding:30rpx;
			.li{
				margin-bottom:30rpx;
				padding:30rpx;
				border-radius: 20rpx;
				background-image: linear-gradient(to bottom,#dfc3f8 -80%,#fff 100%);
				
				.infor{
					height:240rpx;
					overflow: hidden;
					font-size:28rpx;
					line-height:1.8;
					color:#333;
				}
				.heightFix{
					height:initial;
					
				}
				.title{
					font-size:36rpx;
					font-weight: bold;
					margin-bottom:20rpx;
				}
				.btn-box{
					padding:20rpx 0;
					justify-content: flex-end;
				}
			}
		}
	}
	.b-box {
		.li{
			background: #fff;
			margin-bottom:20rpx;
			border-radius: 10rpx;
			.n-text{
				padding:20rpx 0;
			}
		}
	}
	.right-text{
		margin-left:20rpx;
		text-align: left;
		.hd{
			font-size:32rpx;
			margin-bottom:10rpx;
		}
		.desc{
			color:#999;
			
		}
	}
	.b-box{
		text-align: center;
		background:#fff;
		margin-top:20rpx;
		padding:20rpx;
		.currSty{
			color:green;
		}
		.h-bd{
			text-align: left;
			padding:20rpx 0;
			.h-title{
				display: inline-block;
				width:10rpx;
				height:30rpx;
				background-color: #d0abf4;
				border-radius: 5rpx;
				margin-right:10rpx;
			}
		}
	}
	.u-content {
		// margin-top: 100rpx;
		
		// padding:30rpx;
		.banner{
			.desc{
				margin-top:20rpx;
				margin-bottom:20rpx;
			}
		}
		
	}
</style>